<template>
  <div class="home">

    <!--头部导航条-->
    <nav-bar :bgColor="'#ff5777'" class="home_nav_bar">
      <div slot="nav_bar_center">
        购物街
      </div>
    </nav-bar>


    <scroll class="scroll-box">
      <!--轮播图-->
      <home-swiper :banner="banner"></home-swiper>

      <!--推荐-->
      <recommend-list :recommends="recommend"></recommend-list>

      <!--热门-->
      <feature-view :imageUrl="imageUrl"></feature-view>

      <!--tabControl-->
      <tab-control :tabs="tabs" class="tab-control-sticky" @changeTab="getCategoryData"></tab-control>


      <goods-list>
        <goods-list-item v-for="item of showGoodsList" :goodsItem="item">

        </goods-list-item>
      </goods-list>

      <div>测试是否到底部了123</div>
    </scroll>


    <!--mock数据，可以滚动页面-->
    <!--<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
      <li>8</li>
    </ul>-->
  </div>
</template>

<script>

  /**********组件**************/
  import NavBar from 'components/common/navbar/NavBar'
  import HomeSwiper from './components/HomeSwiper'
  import RecommendList from 'components/common/recommendList'
  import FeatureView from './components/FeatureView'
  import TabControl from 'components/common/tabControl'
  import Scroll from 'components/common/scroll/Scroll'

  import {GoodsList, GoodsListItem} from 'components/content/goods'

  /***********首页的接口***********/
  import {getHomeMultidata, getHomeGoods} from "network/home";

  import imageUrl from 'assets/img/home/recommend_bg.jpg'

  export default {
    name: "Home",
    data() {
      return {
        banner: [], //
        recommend: [], //
        imageUrl, // 热门的图片(本地图片的处理方式)
        tabs: [
          '流行', '新款', '精选'
        ],
        goods: {
          pop: {page: 0, list: []},
          new: {page: 0, list: []},
          sell: {page: 0, list: []},
        },
        // 记录当前的分类 pop sell fav
        currentType: 'pop',
      }
    },
    components: {
      NavBar: NavBar,
      HomeSwiper,
      RecommendList,
      // 图片
      FeatureView,
      // tab切换
      TabControl,
      // 商品缩略图展示
      GoodsList,
      GoodsListItem,
      // 滚动组件
      Scroll,
    },
    created() {
      // 获取banner数据
      this.getHomeMultidata()
      // 获取goods接口
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    methods: {
      // 获取banner数据
      getHomeMultidata() {
        getHomeMultidata().then(
          res => {
            console.log('banner-res:', res);
            this.banner = res.data.banner.list || []
            this.recommend = res.data.recommend.list || []
          }
        )
      },
      // 获取goods接口
      getHomeGoods(type) {
        let page = this.goods[type].page + 1;
        getHomeGoods(type, page).then(
          res => {
            console.log('goods-res:', res);
            this.goods[type].list.push(...res.data.list)
            this.goods[type].page += 1
          },
          err => {
            console.log('goods-err:', err);
          }
        )
      },

      // 切换tab的时候，传入不同的数据
      getCategoryData(index) {
        console.log('getCategoryData::', index);
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
          default:
            this.currentType = 'pop'
        }
      }

    },
    computed:{
      showGoodsList(){
        return this.goods[this.currentType].list
      }
    }
  }
</script>

<style scoped lang="less">
  .home {
    padding-top: 44px;
    height: 100vh;
  }

  .home_nav_bar {
    background: var(--color-tint);
    color: #fff;
  }

  .tab-control-sticky {
    /*position: sticky;*/
    /*top: 44px;*/
  }

  .scroll-box{
    height: 300px;
    height: calc(100% - 49px);
    overflow: hidden;
  }
</style>
